﻿@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        opacity: 1;
    }
}

@keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        opacity: 1;
    }
}

.e-rounded {
    border-radius: 0.25rem !important;
}

$dimensions: 16 24 32 48 64 96 128 256 512 !default

@each $dimension in $dimensions {
    &.e-figure-is-#{$dimension}x#{$dimension} {
        height: $dimension * 1px;
        width: $dimension * 1px;
    }
}

.e-is-none {
    display: none;
}

.e-is-inline {
    display: inline !important;
}

.e-is-inline-block {
    display: inline-block !important;
}

.e-is-block {
    display: block !important;
}

.e-is-table {
    display: table !important;
}

.e-is-table-row {
    display: table-row !important;
}

.e-is-table-cell {
    display: table-cell !important;
}

.e-is-flex {
    display: flex !important;
}

.e-is-inline-flex {
    display: inline-flex !important;
}

.e-is-table {
    display: table !important;
}

.e-is-table-row {
    display: table-row !important;
}

.e-is-table-cell {
    display: table-cell !important;
}

.e-is-flex-row {
    flex-direction: row !important;
}

.e-is-flex-column {
    flex-direction: column !important;
}

.e-is-flex-row-reverse {
    flex-direction: row-reverse !important;
}

.e-is-flex-column-reverse {
    flex-direction: column-reverse !important;
}

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);


        .d#{$infix}-inline {
            display: inline !important;
        }

        .d#{$infix}-inline-block {
            display: inline-block !important;
        }

        .d#{$infix}-block {
            display: block !important;
        }

        .d#{$infix}-flex {
            display: flex !important;
        }

        .d#{$infix}-inline-flex {
            display: inline-flex !important;
        }

        .flex#{$infix}-row {
            flex-direction: row !important;
        }

        .flex#{$infix}-column {
            flex-direction: column !important;
        }

        .flex#{$infix}-row-reverse {
            flex-direction: row-reverse !important;
        }

        .flex#{$infix}-column-reverse {
            flex-direction: column-reverse !important;
        }
    }
}


.e-border {
    border: $border-width solid $border-color !important;
}

.e-border-top {
    border-top: $border-width solid $border-color !important;
}

.e-border-right {
    border-right: $border-width solid $border-color !important;
}

.e-border-bottom {
    border-bottom: $border-width solid $border-color !important;
}

.e-border-left {
    border-left: $border-width solid $border-color !important;
}

.e-border-0 {
    border: 0 !important;
}

.e-border-top-0 {
    border-top: 0 !important;
}

.e-border-right-0 {
    border-right: 0 !important;
}

.e-border-bottom-0 {
    border-bottom: 0 !important;
}

.e-border-left-0 {
    border-left: 0 !important;
}

@each $name, $value in $theme-colors {
    $color: $value;

    .e-border-#{$name} {
        border-color: $color !important;
    }
}

.e-border-white {
    border-color: white !important;
}

.e-rounded {
    border-radius: $radius !important;
}

.e-rounded-top {
    border-top-left-radius: $radius !important;
    border-top-right-radius: $radius !important;
}

.e-rounded-right {
    border-top-right-radius: $radius !important;
    border-bottom-right-radius: $radius !important;
}

.e-rounded-bottom {
    border-bottom-right-radius: $radius !important;
    border-bottom-left-radius: $radius !important;
}

.e-rounded-left {
    border-top-left-radius: $radius !important;
    border-bottom-left-radius: $radius !important;
}

.e-rounded-circle {
    border-radius: 50% !important;
}

.e-rounded-pill {
    border-radius: $radius-pill !important;
}

.e-rounded-0 {
    border-radius: 0 !important;
}


@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .e-is-flex-direction#{$infix}-row {
            flex-direction: row !important;
        }

        .e-is-flex-direction#{$infix}-column {
            flex-direction: column !important;
        }

        .e-is-flex-direction#{$infix}-row-reverse {
            flex-direction: row-reverse !important;
        }

        .e-is-flex-direction#{$infix}-column-reverse {
            flex-direction: column-reverse !important;
        }

        .e-is-flex-wrap#{$infix}-wrap {
            flex-wrap: wrap !important;
        }

        .e-is-flex-wrap#{$infix}-nowrap {
            flex-wrap: nowrap !important;
        }

        .e-is-flex-wrap#{$infix}-wrap-reverse {
            flex-wrap: wrap-reverse !important;
        }

        .e-is-flex#{$infix}-fill {
            flex: 1 1 auto !important;
        }

        .e-is-flex#{$infix}-grow-0 {
            flex-grow: 0 !important;
        }

        .e-is-flex#{$infix}-grow-1 {
            flex-grow: 1 !important;
        }

        .e-is-flex#{$infix}-shrink-0 {
            flex-shrink: 0 !important;
        }

        .e-is-flex#{$infix}-shrink-1 {
            flex-shrink: 1 !important;
        }

        .e-is-justify-content#{$infix}-flex-start {
            justify-content: flex-start !important;
        }

        .e-is-justify-content#{$infix}-flex-end {
            justify-content: flex-end !important;
        }

        .e-is-justify-content#{$infix}-center {
            justify-content: center !important;
        }

        .e-is-justify-content#{$infix}-space-between {
            justify-content: space-between !important;
        }

        .e-is-justify-content#{$infix}-space-around {
            justify-content: space-around !important;
        }

        .e-is-align-items#{$infix}-flex-start {
            align-items: flex-start !important;
        }

        .e-is-align-items#{$infix}-flex-end {
            align-items: flex-end !important;
        }

        .e-is-align-items#{$infix}-center {
            align-items: center !important;
        }

        .e-is-align-items#{$infix}-baseline {
            align-items: baseline !important;
        }

        .e-is-align-items#{$infix}-stretch {
            align-items: stretch !important;
        }

        .e-is-align-self#{$infix}-auto {
            align-self: auto !important;
        }

        .e-is-align-self#{$infix}-flex-start {
            align-self: flex-start !important;
        }

        .e-is-align-self#{$infix}-flex-end {
            align-self: flex-end !important;
        }

        .e-is-align-self#{$infix}-center {
            align-self: center !important;
        }

        .e-is-align-self#{$infix}-baseline {
            align-self: baseline !important;
        }

        .e-is-align-self#{$infix}-stretch {
            align-self: stretch !important;
        }

        .e-is-align-content#{$infix}-flex-start {
            align-content: flex-start !important;
        }

        .e-is-align-content#{$infix}-flex-end {
            align-content: flex-end !important;
        }

        .e-is-align-content#{$infix}-center {
            align-content: center !important;
        }

        .e-is-align-content#{$infix}-space-between {
            align-content: space-between !important;
        }

        .e-is-align-content#{$infix}-space-around {
            align-content: space-around !important;
        }

        .e-is-align-content#{$infix}-stretch {
            align-content: stretch !important;
        }

        @for $i from 0 through 12 {
            .e-is-flex-order#{$infix}-#{$i} {
                order: $i;
            }
        }
    }
}

// Width and height

@each $prop, $abbrev in (width: width, height: height) {
    @each $size, $length in $sizes {
        .e-#{$abbrev}-#{$size} {
            #{$prop}: $length !important;
        }
    }
}

.e-max-width-100 {
    max-width: 100% !important;
}

.e-max-height-100 {
    max-height: 100% !important;
}

// Viewport additional helpers

.e-min-viewport-width-100 {
    min-width: 100vw !important;
}

.e-min-viewport-height-100 {
    min-height: 100vh !important;
}

.e-viewport-width-100 {
    width: 100vw !important;
}

.e-viewport-height-100 {
    height: 100vh !important;
}

.e-visible {
    visibility: visible !important;
}

.e-invisible {
    visibility: hidden !important;
}

// Browser default
.e-vertical-align-baseline {
    vertical-align: baseline !important;
}

.e-vertical-align-top {
    vertical-align: top !important;
}

.e-vertical-align-middle {
    vertical-align: middle !important;
}

.e-vertical-align-bottom {
    vertical-align: bottom !important;
}

.e-vertical-align-text-bottom {
    vertical-align: text-bottom !important;
}

.e-vertical-align-text-top {
    vertical-align: text-top !important;
}

.e-cols-no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .e-col,
    > [class*="e-col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

.e-image-fluid {
    width: 100%;
    height: auto;
}

.e-shadow-sm {
    box-shadow: $box-shadow-sm !important;
}

.e-shadow {
    box-shadow: $box-shadow !important;
}

.e-shadow-lg {
    box-shadow: $box-shadow-lg !important;
}

.e-shadow-none {
    box-shadow: none !important;
}
